<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <div>
                    <el-row :gutter="30">
                        <el-col :span="7">
                            <el-input placeholder="护理项目名称" v-model="queryParams.itemName" @clear="query" clearable
                                size="large">
                                <template #append>
                                    <el-button type="info" @click="query" style="color:black">查询</el-button>
                                </template>
                            </el-input>
                        </el-col>
                        <el-col :span="7" style="margin-top:5px">
                            <el-button type="primary" @click="this.$router.go(-1)" round>返回</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-header>
            <el-divider style="margin:0"></el-divider>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="11">
                        <div class="table-main">
                            <div class="table-main-header">护理项目</div>
                            <!-- 表格 -->
                            <el-table :data="nurseItemList" highlight-current-row style="width: 100% ;color:black;"
                                size="small" @row-click="changeRow" stripe>
                                <el-table-column align="center" type="index" :index="indexMethod" label="序号"
                                    width="60" />
                                <el-table-column align="center" prop="serialNumber" label="编号" width="80" />
                                <el-table-column align="center" prop="nursingName" label="名称" width="100" />
                                <el-table-column align="center" prop="servicePrice" label="价格" width="80" />
                                <el-table-column align="center" prop="executionCycle" label="执行周次" width="80" />
                                <el-table-column align="center" prop="executionTimes" label="执行次数" width="80" />
                            </el-table>
                            <!-- 分页插件 -->
                            <div style="margin-top:15px">
                                <!-- 
                page-size:每页显示条目个数
                current-page:页码 配合@current-change使用
                disabled:是否禁用分页 
                background:是否为分页按钮添加背景色
                layout:组件布局，子组件名用逗号分隔
                total:总条目数

                -->
                                <el-pagination :page-size="page.pageSize" background :current-page="page.currentPag"
                                    layout=" prev, pager, next" :total="page.total"
                                    @current-change="handleCurrentChange" />
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="13">
                        <div class="table-main">
                            <div class="table-main-header">护理项目({{ levelName }})</div>
                            <!-- 表格 -->
                            <el-table :data="isInLevelItemList" style="width: 100% ;color:black;" size="small" stripe>
                                <el-table-column align="center" type="index" label="序号" width="60" />
                                <el-table-column align="center" prop="serialNumber" label="编号" width="80" />
                                <el-table-column align="center" prop="nursingName" label="名称" width="100" />
                                <el-table-column align="center" prop="servicePrice" label="价格" width="80" />
                                <el-table-column align="center" prop="executionCycle" label="执行周次" width="80" />
                                <el-table-column align="center" prop="executionTimes" label="执行次数" width="80" />
                                <el-table-column align="center" fixed="right" label="操作" width="100">
                                    <template #default="scope">
                                        <el-button type="danger" icon="CloseBold" size="small"
                                            @click="del(scope.row.id)"></el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { findNurseItem } from "@/api/nurseItem.js";
import {
    addItemToLevel,
    listNurseItemByLevel,
    removeNurseLevelItem
} from "@/api/nurseLevel.js";
export default {
    data() {
        return {
            levelId: this.$route.query.levelId,
            levelName: this.$route.query.levelName,
            // 分页属性封装
            page: {
                total: 0,
                pageSize: 6,
                currentPag: 1,
                pagCount: 0
            },
            queryParams: {
                status: "1", // 查询默认状态1 -启用
                itemName: "",
                pageSize: "1" // 默认第一页
            },
            isInLevelItemList: [], // 在当前级别中的护理项目
            nurseItemList: [] // 护理项目列表
        };
    },
    mounted() {
        this.getNurseItemList();
        this.listNurseItemByLevel();
    },
    computed: {
        indexMethod() {
            return this.page.currentPag * this.page.pageSize - this.page.pageSize + 1;
        }
    },
    methods: {
        //点击查询
        query() {
            this.queryParams.pageSize = "1"; //回到第一页
            this.getNurseItemList();
        },
        //选中页码
        handleCurrentChange(curPage) {
            this.page.currentPag = curPage;
            this.queryParams.pageSize = curPage; //参数pageSize是服务端接收页码参数名
            //重新渲染表格
            this.getNurseItemList();
        },
        //api-鼠标点击某行触发: 添加护理项目到当前护理级别中
        changeRow(row) {
            addItemToLevel({ levelId: this.levelId, itemId: row.id }).then(res => {
                if (res.flag) {
                    // 刷新表格
                    this.listNurseItemByLevel();
                } else {
                    this.$message.error(res.message);
                }
            });
        },
        //api-查询护理项目(分页)
        getNurseItemList() {
            findNurseItem(this.queryParams).then(res => {
                this.nurseItemList = res.data.records;
                this.page.total = res.data.total; // 总记录数
                this.page.pageSize = res.data.size; // 每页显示条数
                this.page.currentPag = res.data.current; // 当前页码
                this.page.pagCount = res.data.pages; // 总页数
            });
        },
        //api-查询当前级别护理项目
        listNurseItemByLevel() {
            listNurseItemByLevel({ levelId: this.levelId }).then(res => {
                this.isInLevelItemList = res.data;
            });
        },
        // /api-删除
        del(id) {
            this.$confirm("此操作删除记录，是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    removeNurseLevelItem({ levelId: this.levelId, itemId: id }).then(
                        res => {
                            if (res.flag) {
                                this.$message.success(res.message);
                                // 刷新表格
                                this.listNurseItemByLevel();
                            } else {
                                this.$message.error(res.message);
                            }
                        }
                    );
                })
                .catch(() => { });
        }
    }
}
</script>

<style scoped>
.table-main {
    height: 500px;
    border: 1px solid #d4c5c5;
}

.table-main .table-main-header {
    height: 50px;
    background-color: #3ca2e0;
    color: #fff;
    font-size: 20px;
    font-family: "Microsoft YaHei";
    line-height: 50px;
}
</style>